<template>
  <div>
    <el-form :model="searchList" ref="form" size="normal" label-position="left" label-width="100px" class="center">
      <el-row :gutter="20">
        <el-col :span="20" :offset="0">
          <el-form-item label="机构名称">
            <el-cascader :options="offiecType" v-model="searchList.role" clearable :props="{ checkStrictly: true }"
              filterable class="wid">
              <template slot-scope="{ node, data }">
                <span>{{ data.label }} ({{data.code}})</span>
              </template>
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="0">
          <div class="right">
            <el-button type="primary" size="medium" @click="search">搜索</el-button>
            <el-button type="primary" size="medium" @click="save">保存</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <el-table :data="userAll" border stripe height="400px" @cell-dblclick="cellAdd" v-loading="loading">
          <el-table-column label="待选接口">
            <template slot-scope="{row}">
              {{row.name}}-{{row.login_name}}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12" :offset="0">
        <el-table :data="user" border stripe height="400px" @cell-dblclick="cellRemove">
          <el-table-column label="已选接口">
            <template slot-scope="{row}">
              {{row.name}}-{{row.login_name}}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: '',
  components: {

  },
  props: {
    roleId: {
      type: String,
      default: () => {
        return ''
      }
    },
    // 已有用户
    fUser: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      loading: false,
      searchList: {},
      // fUser 复制品
      cUser: '',
      // 用户id list
      userIdList: [],
      // 机构筛选
      offiecType: [],
      // 全部用户
      userAll: [],
      // 已选用户
      user: [],

    }
  },
  created () {

  },
  mounted () {
    this.user = this.fUser
    this.init()
  },
  methods: {
    // 查询接口模块
    async init () {
      const res = await this.$http('sysGetForRoleList', {
      })
      let list = []
      res.forEach(item => {
        list.push({
          id: item.id,
          parent_id: item.parent_id,
          value: item.id,
          label: item.name,
          code: item.code
        })
        this.userIdList[item.id] = item.parent_ids
      })
      //用户id list 取值
      this.cUser = this.$util.arrToStr(this.fUser, 'id')
      // 机构列表生成
      this.offiecType = this.toTree(list, 'children', 'id', 'parent_id')
    },
    async search () {
      let company_id = ''
      if (this.searchList.role.length < 1) {
        return false
      } else {
        company_id = this.searchList.role[this.searchList.role.length - 1]
      }
      this.loading = true
      const res = await this.$http('sysGetUserList', {
        company_id: company_id,
        parent_ids: this.userIdList[company_id]
      })
      // 获取全部user,排除已有
      this.userAll = []
      res.forEach(item => {
        if (this.cUser.indexOf(item.id) < 0) {
          this.userAll.push(item)
        }
      })
      this.loading = false
    },
    async save () {
      const res = await this.$http('sysSetAllotUser', {
        role_id: this.roleId,
        user_id: this.$util.arrsToArr(this.user, 'id')
      })
      this.$tips.success(res.errmsg)
      this.init()
    },
    cellAdd (row, column, cell, event) {
      if (this.cUser.indexOf(row.id) > -1) {
        return
      } else {
        this.cUser = this.cUser + ',' + row.id
      }
      this.user.push({
        login_name: row.login_name,
        id: row.id,
        name: row.name,
      })
      this.search()
      this.$tips.warning('已添加')
    },
    cellRemove (row, column, cell, event) {
      if (this.cUser.indexOf(row.id) > -1) {
        this.cUser = this.cUser.replace(',' + row.id, ' ')
      } else {
        return
      }

      this.user = this.user.filter(item => {
        return item.id !== row.id
      })
      this.search()
      this.$tips.warning('已移除')
    },
    // 菜单遍历重组结构
    toTree (data, children_key, id_key, pid_key) {
      let child_key = children_key || 'children'
      let id = id_key || 'id'
      let pid = pid_key || 'pid'
      // 删除无用子节点
      data.forEach(item => {
        delete item[child_key]
      })
      // 定义map,给map赋值
      let map = {}
      data.forEach(item => {
        map[item[id]] = item
      })
      // 遍历处理
      let arr = []
      data.forEach(item => {
        // 定义父节点
        let parent = map[item[pid]]
        if (parent) {
          (parent[child_key] || (parent[child_key] = [])).push(item)
        } else {
          arr.push(item)
        }
      })
      return arr
    },
  },
  computed: {
  }
}
</script>
<style lang='scss' scoped>
</style>
